<template>
	<view class="orderTabs">
		<!-- 设置全部订单头部导航栏 -->
	<!-- 	<view class="tabs">
			<view class="tab" v-for="item in navArr" :key="item.name" :class="{ active: active === item.name }"
				@click="orderTabs(item.name)">
				{{ item.title }}
			</view>
		</view> -->
		<view class="navTabs">
			<view v-for="datas in showDatas" :key="datas.orderId" class="order-card">
				<view class="order-info">
					<text class="order-id">订单号: {{ datas.orderId }}</text>
					<text class="order-title">{{ datas.merchantName }}</text>
					<text class="order-price">价格: ￥{{ formatPrice(datas.totalAmount) }}</text>
					<text class="order-num">
						订单类型:
						<span v-if="datas.reservationType === 1">个人</span>
						<span v-else-if="datas.reservationType === 2">包场</span>
						<span v-else>未知类型</span>
					</text>
					<text class="order-num">订单时间: {{ datas.createTime }}</text>
					<view v-if="tagsShow" class="order-tag" :class="datas.orderType">{{ datas.orderStateText }}</view>
				</view>
				<image class="order-thumb" :src="datas.imageUrl" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '../../api/login/login';
	import {
		getMyOrder
	} from '@/api/my/myOrder.js';
	export default {
		data() {
			return {
				active: 'all', // 默认的显示状态
				showDatas: [], // 需要显示的数据
				tagsShow: true,
				navArr: [{
						title: '全部订单',
						name: 'all'
					},
					{
						title: '已完成',
						name: 'ywc'
					},
					{
						title: '已取消',
						name: 'yqx'
					},
				],
				navDatas: [],
			};
		},

		mounted() {
			this.getMyOrderInfo()
		},
		methods: {
			// 标签切换
			orderTabs(name) {
				this.active = name;
				// 根据激活状态筛选数据
				this.showDatas = this.active === 'all' ?
					this.navDatas :
					this.navDatas.filter((item) => item.orderState === this.active);
			},
			// 格式化价格

			formatPrice(price) {
				if (typeof price !== 'number' || isNaN(price)) {
					return '0.00'; // 默认值
				}
				return price.toFixed(2);
			},


			// 获取订单数据
			getMyOrderInfo() {
				getMyOrder()
					.then(res => {
						if (res && res.data) {
							
							this.navDatas = res.data.map((item, index) => ({
								...item,
								imageUrl: `http://localhost:8080${item.imageUrl}`, // 拼接前缀
								orderId: item.orderId || `TEMP_${index}` // 确保唯一键
							}));
							console.log(this.navDatas);
							this.orderTabs(this.active); // 根据当前激活的 tab 刷新数据
						} else {
							console.error("返回数据为空");
						}
					})
					.catch(err => {
						console.error("请求失败", err);
						login(err); // 调用登录逻辑
					});
			}

		},
		onLoad(option) {
			this.active = option.active || 'all';
			this.orderTabs(this.active);
		},
	};
</script>

<style>
	.orderTabs {
		width: 100%;
		background-color: #f9f9f9;
		/* 背景颜色柔和 */
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		background-color: #ffffff;
		/* 导航栏背景改为白色 */
		border-bottom: 1px solid #e0e0e0;
		padding: 10px 0;
		/* 增加上下间距 */
	}

	.tab {
		padding: 10px 20px;
		cursor: pointer;
		width: 300px;
		color: #666;
		font-size: 16px;
		/* 字体稍大 */
		transition: color 0.3s, border-bottom 0.3s;
		/* 添加过渡动画 */
	}

	.tab.active {
		color: #007aff;
		border-bottom: 2px solid #007aff;
		font-weight: bold;
		/* 激活状态加粗 */
	}

	.navTabs {
		padding: 15px;
		background-color: #f5f5f5;
		/* 内容区背景稍暗，突出对比 */
	}

	.order-card {
		display: flex;
		align-items: center;
		border: 1px solid #e0e0e0;
		border-radius: 10px;
		background-color: #ffffff;
		/* 卡片背景白色 */
		margin-bottom: 15px;
		/* 卡片之间增加间距 */
		padding: 15px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		/* 添加阴影 */
		transition: box-shadow 0.3s;
		/* 添加过渡动画 */
	}

	.order-card:hover {
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
		/* 鼠标悬停时增加阴影 */
	}

	.order-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.order-id,
	.order-title,
	.order-price,
	.order-num {
		margin: 4px 0;
		font-size: 14px;
		color: #333;
	}

	.order-id {
		font-weight: bold;
		/* 订单号加粗 */
	}

	.order-title {
		font-size: 16px;
		/* 标题字体稍大 */
		color: #555;
	}

	.order-price {
		color: #ff5722;
		/* 价格突出显示 */
	}

	.order-tag {
		display: inline-block;
		padding: 4px 10px;
		border-radius: 12px;
		font-size: 12px;
		color: #fff;
		margin-top: 6px;
		font-weight: 500;
	}

	.order-tag.primary {
		width: 50px;
		align-items: center;
		/* 水平居中 */
		text-align: center;
		/* 文字居中 */
		background-color: #007aff;

		/* 蓝色标签 */
	}

	.order-tag.success {
		background-color: #4caf50;
		/* 绿色标签 */
	}

	.order-tag.warning {
		background-color: #ff9800;
		/* 橙色标签 */
	}

	.order-thumb {
		width: 80px;
		height: 80px;
		border-radius: 8px;
		/* 圆角更大 */
		margin-left: 15px;
		object-fit: cover;
		/* 确保图片填满并裁剪 */
		border: 1px solid #ddd;
	}
</style>